<template>
  <div class="rounded border border-solid border-color-split flex flex-row items-stretch h-120">
    <div class="w-3/5 flex flex-col">
      <div class="p-4">
        <a-input-search
          v-model:value="keyword"
          v-bind="inputSearchProps"
          size="small"
          :allow-clear="true"
          @search="keywordSearch"
        >
          <template #enterButton>
            <a-button>
              <template #icon><Icon type="icon-sousuo" /></template>
            </a-button>
          </template>
        </a-input-search>
      </div>
      <div class="flex-1 relative rounded overflow-auto px-4 pb-4">
        <a-spin v-if="data.length > 0" :spinning="inputSearchProps && inputSearchProps.loading">
          <a-tree
            :checked-keys="value"
            checkable
            :tree-data="(data as any)"
            v-bind="treeProps"
            :default-expand-all="true"
            @check="check"
          >
            <template #title="nodeData">
              <slot name="treeNodeTitle" :data="nodeData" />
            </template>
          </a-tree>
        </a-spin>
        <SlEmpty v-else :description="inputSearchProps && inputSearchProps.loading ? t('common.loading') : emptyText" />
      </div>
    </div>
    <div class="w-2/5 border-0 border-l border-solid border-color-split pl-4 flex flex-col">
      <div class="py-5.5 flex flex-row items-center pr-4.5">
        <div class="flex-1">
          <span class="text-lg font-semibold text-color-header">{{ t("common.choosed") }}</span>
          <span class="text-color-secondary">({{ selectedData.length }})</span>
        </div>
        <div class="text-red-400 cursor-pointer" @click="clearSelected">
          {{ t("common.clear") }}
        </div>
      </div>
      <div class="flex-1 overflow-auto pr-4.5">
        <div v-for="(el, i) in selectedData" :key="el[idKey]" class="flex flex-row items-center mb-4">
          <div class="flex-1">
            <slot name="selectedInfo" :data="el" />
            <!-- <span class="text-color-main">{{ el.userName }}</span>
          <span class="text-sm text-color-secondary">({{ el.organizations }})</span> -->
          </div>
          <div class="cursor-pointer">
            <a @click="removeSelected(el, i)">{{ t("common.remove") }}</a>
          </div>
        </div>
        <SlEmpty v-if="selectedData.length === 0" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useI18n } from "/@/locales/useI18n";
import { ref, watch } from "vue";
import { UserItem } from "/@/api/aiot/user/models";
import SlEmpty from "/@/components/SlEmpty.vue";
import { TableRecord } from "/@/api/models";
import type { InputProps, TreeProps } from "ant-design-vue";
import { findItemByKey, findParents } from "/@/utils/treeData";
import type { TreeDataItem } from "/@/utils/treeData";
import { useEmptyText } from "/@/hooks/useEmptyText";

const props = withDefaults(
  defineProps<{
    //所勾选的id数组 双向绑定
    value: string[];
    //不能选择的id数组
    disabledValue?: string[];
    data: TreeDataItem<TableRecord>[];
    idKey?: string;
    inputSearchProps?: InputProps;
    treeProps?: TreeProps;
  }>(),
  {
    idKey: "id",
  }
);
const emits = defineEmits(["update:value", "search"]);
const { t } = useI18n();
/**
 * search
 */
const { emptyText, modelForEmptyText } = useEmptyText();
const keyword = ref("");
function keywordSearch(v) {
  modelForEmptyText.value = {
    keyword: v,
  };
  emits("search", v);
}
/**
 * tree
 */
const check: TreeProps["onCheck"] = (checkedKeys, { checkedNodes }) => {
  selectedData.value = checkedNodes.filter((el) => el.transfterable);
  emits("update:value", checkedKeys);
};
// function select(_, { node }) {
// if (!node.checkable) return;
// const selected = props.value.find((key) => key === node[props.idKey]);
// onSelect(node, !selected);
// }
//select
const selectedData = ref<TableRecord[]>([]);

// function onSelect(record: any, selected: boolean) {
//   const copyValue = [...props.value];
//   const key = record[props.idKey];
//   toggleOne(selected, copyValue, key);
//   emits("update:value", copyValue);
// }
// function toggleOne(selected: boolean, copyValue: string[], key: string) {
//   const index = copyValue.indexOf(key);
//   if (selected) {
//     if (index === -1) {
//       copyValue.push(key);
//       const info = findItemByKey(props.data, key, props.idKey);
//       // const item = props.data.find((u) => u[props.idKey] === key);
//       if (info) {
//         selectedData.value.push(info.item);
//       }
//     }
//   } else {
//     if (index >= 0) {
//       copyValue.splice(index, 1);
//       selectedData.value.splice(index, 1);
//     }
//   }
// }
watch(
  () => props.value,
  (v) => {
    if (v.length === 0) {
      selectedData.value = [];
    }
  }
);
function removeSelected(el, i) {
  const copyValue = [...props.value];
  const value = el[props.idKey];
  //将所有父节点都remove
  const removeKeys: string[] = [];
  findParents(props.data, value, props.idKey, removeKeys);
  removeKeys.push(value);
  removeKeys.forEach((key) => {
    const j = copyValue.indexOf(key);
    if (j >= 0) {
      copyValue.splice(j, 1);
    }
  });
  selectedData.value.splice(i, 1);
  emits("update:value", copyValue);
}
function clearSelected() {
  emits("update:value", []);
}
</script>
